<script lang="ts" setup>
import type { galdata } from '../../../../model/galData'
import ColorManager from "../../../../manager/colorManager";
import { ref } from 'vue';

const colorArr = ColorManager.get(0);
const colorBor = ref(colorArr.border);
const colorBorBack = ref(colorArr.background);
const colorText = ref(colorArr.text);
const colorBoxS = ref(colorArr.boxShadow);

const isActive = ref(false);

defineProps<{
    galRowData: galdata,
}>();




</script>

<template>
    <div class="dataRow-root" @click="isActive = !isActive;">
        <div class="dataRow-item" :class="{ 'is-selection': isActive }">
            <div class="dataRow-item-div">
                <div>
                    <section class="dataRow-item-section name">
                        {{ galRowData.Name.replace('CG', '').replace('+', '') }}
                    </section>
                    <section class="dataRow-item-section name" v-if="isActive && galRowData.NickName">
                        昵称/原名 : {{ galRowData.NickName }}
                    </section>
                    <div v-if="!isActive" style="display: flex;">
                        <div class="dataRow-item-opi top" :class="galRowData.IsChinese ? 'red' : 'green'"></div>
                        <div class="dataRow-item-opi top" :class="galRowData.Bug ? 'red' : 'green'"></div>
                        <div class="dataRow-item-opi top"
                            :class="galRowData.Name.indexOf('CG') == -1 ? 'red' : 'green'"></div>
                    </div>
                </div>
            </div>
            <div class="dataRow-item-div" v-if="isActive">
                <div>
                    <section class="dataRow-item-section club" v-if="isActive && galRowData.Club">
                        社团 : {{ galRowData.Club }}
                    </section>
                    <section class=" dataRow-item-section club" v-if="isActive && galRowData.NickClub">
                        代称 : {{ galRowData.NickClub }}
                    </section>
                </div>
                <div>
                    <section class="dataRow-item-section club">
                        编号 : {{ galRowData.NewIndex }}
                    </section>
                    <div class="dataRow-item-opi top" :class="galRowData.IsChinese ? 'red' : 'green'"></div>
                    <section class="dataRow-item-section club">
                        烤度 : {{ galRowData.IsChinese ? galRowData.IsChinese : '已汉化' }}
                    </section>
                    <div class="dataRow-item-opi top" :class="galRowData.Bug ? 'red' : 'green'"></div>
                    <section class="dataRow-item-section club">
                        问题 : {{ galRowData.Bug ? galRowData.Bug : '似乎没有问题!' }}
                    </section>
                    <div class="dataRow-item-opi top" :class="galRowData.Name.indexOf('CG') == -1 ? 'red' : 'green'">
                    </div>
                    <section class="dataRow-item-section club">
                        是否有已知CG包
                    </section>
                </div>
                <section class="dataRow-item-section clubP">
                    官方链接 :
                    <a :href="galRowData.Url" v-if="galRowData.Url" @click.stop="" target="_blank">{{ galRowData.Url
                        }}</a>
                    <span v-else>待补充</span>
                </section>
                <section class="dataRow-item-section clubP">
                    资源链接 :
                    <a :href="`https://61.132.231.213:45288/galgame/${galRowData.NewIndex.substring(0, 1)}/${galRowData.NewIndex}/`"
                        @click.stop="" target="_blank">{{
        `https://61.132.231.213:45288/galgame/${galRowData.NewIndex.substring(0,
            1)}/${galRowData.NewIndex}/` }}</a>
                </section>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.dataRow-root {
    width: 100%;
}

.dataRow-item {
    color: v-bind(colorText);
    padding: 15px;
    border-bottom: v-bind(colorBorBack) 1px solid;
    border-top: rgba(0, 0, 0, 0) 1px solid;
    margin: 0px 20px;
    transition-duration: 0.2s;
}

.dataRow-item:hover {
    color: white;
    border: v-bind(colorBor) 1px solid;
    border-radius: 7px;
    background-color: v-bind(colorBorBack);
    box-shadow: 0px 0px 5px v-bind(colorBoxS);
}

.is-selection {
    color: white;
    border: v-bind(colorBor) 1px solid;
    border-radius: 7px;
    background-color: v-bind(colorBorBack);
    box-shadow: 0px 0px 5px v-bind(colorBoxS);
}


.dataRow-item-div {
    margin-top: 0px;

    >div {
        display: flex;
        flex-wrap: wrap;
    }
}

.dataRow-item-section {
    padding: 2px;
}

.name {
    width: 500px;
}

.club {
    width: 250px;
}

.clubP {
    width: 100%;
}

.dataRow-item-opi {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    box-shadow: 0px 0px 5px v-bind(colorBoxS);
    margin: 0px 10px 0px 10px;
}

.green {
    background-color: #6BFF74;
}

.red {
    background-color: #FF466B;
}

.top {
    margin: 0px 10px 0px 0px;
}
</style>